<template>
  <el-row 
  :class="{empty_row:colsJudge(cols)}">
      <el-col 
        v-for="(t,i) in cols" 
        :span="t.span" 
        :offset="i==1?2:0" 
        :class="{empty_col:judgeCol(t)}" 
        :key="i"
        @mouseup.native="dragEnd($event,i)"
        >
          <el-form-item :label="t.label" v-if="t.span" labelWidth="88px">
            <template>
              <el-input
              v-if="['input','textarea'].includes(t.type)" 
              :type="t.type"
              :placeholder="t.placeholder"
              v-model="t.value"
              />
            </template>  
          </el-form-item>
  </el-col>
  </el-row>
</template>

<script>
export default {
  props: {
    cols: {
      type: Array,
      default: () => [],
    },
    firstI:{
      type:Number
    }
  },
  methods: {
    colsJudge(cols) {
      return cols.some(col=>!col.hasOwnProperty('value'));
    },
    judgeCol(obj){
      return !obj.hasOwnProperty('value')
    },
    dragEnd(e,i){
      this.$emit('dragEnd',this.firstI,i)
    },
  },
};
</script>

<style lang="scss" scoped>
.empty_row {
    min-height: 48px;
    width: 100%;
    border: 2px dashed #b2c9ee;
    padding: 6px;
    .empty_col {
      height: 30px;
      border: 2px dashed #b2c9ee;
      transition: 0.2s ease-in-out;
      &:hover {
        border-color: blue;
      }
    }
  }
</style>